<template>
  <div class="header">
    <el-row type="flex" align="middle" class="title">
      <img class="auIcon" :src="config.icon">
      <span class="titleName">{{config.name}}</span>
    </el-row>
    <el-row type="flex" align="middle" class="btnList">
      <div class="auBtn" v-if="config.buttonConfig.setting" @click.stop="showSetting"><i :class="isShowSetting?'el-icon-back':'el-icon-setting'"></i></div>
      <div class="auBtn" v-if="config.buttonConfig.min" @click.stop="minWindow"><i class="el-icon-minus"></i></div>
      <div class="auBtn" v-if="config.buttonConfig.max" @click.stop="maxWindow"><i :class="isMax?'el-icon-bottom-left':'el-icon-top-right'"></i></div>
      <div class="auBtn" v-if="config.buttonConfig.close" @click.stop="closeWindow"><i class="el-icon-close"></i></div>
    </el-row>
  </div>
</template>

<script>
import {mapState} from "vuex";
const remote=require("electron").remote;

export default {
  name: "auHeader",
  data(){
    return {
      isShowSetting:false,
      isMax:false,
    }
  },
  computed:{
    ...mapState({
      config:(state)=>state.config,
    })
  },
  methods:{
    //设置
    showSetting(){
      this.isShowSetting=!this.isShowSetting;
      this.$store.commit("config/set",{key:"showSetting",value:this.isShowSetting});
    },
    minWindow(){
      remote.getCurrentWindow().minimize();
    },
    maxWindow(){
      this.isMax=!this.isMax;
      if(this.isMax){
        remote.getCurrentWindow().maximize();
      }else{
        remote.getCurrentWindow().unmaximize();
      }
    },
    closeWindow(){
      remote.app.exit();
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/style/global";
.header{
  height: $header-height;
  box-shadow: var(--au-box-shadow);
  -webkit-user-select: none;
  -webkit-app-region: drag;
  display: flex;
  align-items: center;
  padding: 0 15px;
  flex-flow: row nowrap;
  justify-content: space-between;
  .titleName{
    //font-weight: bold;
  }
  .auIcon{
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
}
.btnList{
  column-gap: 4px;
  .auBtn{
    -webkit-app-region: no-drag;
    font-size: 16px;
    color: #606266;
    background: #eaeaea;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    &:hover{
      background: #e2e2e2;
    }
  }
}
</style>
